<template>
  <div>
    <el-row class="samples-info-box">
      <el-col :span="18">
        <el-row :gutter="10">
          <el-collapse-transition>
            <el-col ref="moreSearch" :lg="17" class="samples-searchBar-wrapper" :class="{'samples-show-more':ismore}">
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchQuery.conditions"
                  size="small"
                  class="samples-search-input"
                  clearable
                  placeholder="分析条件"
                  style="width:100%"
                >
                  <el-option v-for="item in conditionList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-col>
              <el-col :lg="8" :xl="6">
                <div @click="dialogSelect(true)">
                  <el-input
                    size="small"
                    type="text"
                    placeholder="签约单位"
                    clearable
                    class="samples-search-input pointer-event"
                  >
                    <div v-if="searchQuery.partyName" slot="prefix" class="dialog-select">{{ searchQuery.partyName }}</div>
                  </el-input>
                </div>

              </el-col>
              <el-col :lg="8" :xl="6">
                <div @click="dialogSelect()">
                  <el-input
                    size="small"
                    type="text"
                    placeholder="物料名称"
                    clearable
                    class="samples-search-input pointer-event"
                  >
                    <div v-if="searchQuery.name" slot="prefix" class="dialog-select">{{ searchQuery.name }}</div>
                  </el-input>
                </div>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchQuery.classifyName"
                  clearable
                  style="width:100%"
                  placeholder="合同分类"
                  class="samples-search-input"
                  size="small"
                  @change="selectClassifyName"
                  @clear="clearClassifyName"
                >
                  <el-option
                    v-for="item in classifyNameList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-col>
              <el-col :lg="8" :xl="6">
                <el-select
                  v-model="searchQuery.typeName"
                  clearable
                  style="width:100%"
                  placeholder="合同类型"
                  class="samples-search-input"
                  size="small"
                >
                  <el-option
                    v-for="item in typeNameList"
                    :key="item.code"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-col>
              <el-col :lg="16" :xl="12">
                <el-date-picker
                  v-model="timeArr"
                  size="small"
                  style="width:100%"
                  value-format="yyyyMMdd"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                />
              </el-col>
            </el-col>
          </el-collapse-transition>
          <el-col :lg="7">
            <el-button size="small" type="primary" plain class="samples-search-btn" @click="searchList()">
              <i class="el-icon-search" />
            </el-button>
            <el-button size="small" type="text" class="samples-search-btn samples-ismore-button" @click="moreClick">
              MORE
              <i class="samples-search-icon" :class="[ismore?'el-icon-arrow-up':'el-icon-arrow-down']" />
            </el-button>
          </el-col>
        </el-row>
      </el-col>
      <!-- 右半边按钮区域 -->
      <el-col :span="6" class="samples-text-right">
        <el-button size="small" type="success" :loading="loading" @click="exportExcel">导 出</el-button>
      </el-col>
    </el-row>
    <myEcharts :echarts-data-objects="echartsDataObjects" />
    <my-table :data-objects="dataObjects" @tablequery="getList" />
    <dialog-select
      :condition-title="conditionTitle"
      :sign-dialog="signDialog"
      :init-search-name="initSearchName"
      :init-lists-material="initListsMaterial"
      @childSelect-say="visibleDialog"
      @searchName="searchNameList"
      @materialName="materialNameList"
    />
  </div>
</template>

<script>
import {
  materialPageListApi,
  materialExportApi,
  newExportApi
} from '@/api/contractManage/contractAnalysis'

import {
  contractMagDictApi
} from '@/api/contractManage/contractMag'
import myTable from './components/table'
import myEcharts from './components/Echarts'
import dialogSelect from './components/dialogSelect'

export default {
  components: {
    myTable,
    myEcharts,
    dialogSelect
  },

  data() {
    return {
      conditionTitle:'',
      echartsDataObjects: {},
      signDialog: false,
      loading: false,
      initSearchName: [],
      initListsMaterial: [],
      classifyNameList: [],
      typeNameList: [],
      searchQuery: {
        page: 1,
        pageSize: 10,
        conditions: '',
        partyName: '',
        name: '',
        classifyName: '',
        typeName: '',
        time: ''
      },
      timeArr: [],
      // 列表接口返回的数据
      dataObjects: {},
      ismore: false,
      conditionList: [
        { value: 'total', label: '商品金额最高' },
        { value: 'number', label: '商品数量最高' }
      ],
      contractClassify: [],
      projectContractType: [],
      singleContractType: [],
      searchContractType: []
    }
  },
  activated() {
    if (this.$route.query.isTag != true) {
      this.getList()
      this.getEchartsList()
      contractMagDictApi('contract_classify').then(res => {
        this.classifyNameList = res.data
      })
    }
  },
  created() {
    if (this.$route.query.isTag != false) {
      this.getList()
      this.getEchartsList()
      contractMagDictApi('contract_classify').then(res => {
        this.classifyNameList = res.data
      })
    }
  },
  methods: {
    searchNameList(lists) {
      this.initSearchName = lists
      this.searchQuery.partyName = lists.join(',')
    },
    materialNameList(lists) {
      this.initListsMaterial = lists
      this.searchQuery.name = lists.join(',')
    },
    visibleDialog() {
      this.signDialog = false
    },
    dialogSelect(sign) {
      sign ? this.conditionTitle = '签约单位' : this.conditionTitle = '物料名称'
      this.signDialog = true
    },
    searchList() {
      this.searchQuery.page = 1
      this.getList()
      this.getEchartsList()
    },

    // 获取字典项
    getList(tableHandle) {
      if (tableHandle) {
        this.searchQuery.pageSize = tableHandle.pageSize
        this.searchQuery.page = tableHandle.page
      }
      if ((this.timeArr || []).length > 0) {
        this.searchQuery.time = this.timeArr[0] + '-' + this.timeArr[1]
      } else {
        this.searchQuery.time = ''
      }
      materialPageListApi(this.searchQuery).then(res => {
        if (res.code == 1) {
          this.dataObjects = res.data
          this.listQuerIed = this.searchQuery
        } else {
           this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    // 获取Echarts
    getEchartsList() {
      if (this.timeArr.length > 0) {
        this.searchQuery.time = this.timeArr[0] + '-' + this.timeArr[1]
      } else {
        this.searchQuery.time = ''
      }
      const request = Object.assign({}, request, this.searchQuery)
      request.page = ''
      request.pageSize = ''
      materialExportApi(request).then(res => {
        if (res.code == 1) {
          this.echartsDataObjects = res.data[0]
        } else {
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    // 搜索发生改变
    classifyNameChange() {
      this.searchQuery.typeName = ''
      if (this.searchQuery.classifyName == '单项合同') {
        this.searchContractType = this.singleContractType
      } else if (this.searchList.classifyName == '项目合同') {
        this.searchContractType = this.projectContractType
      } else {
        this.searchContractType = []
      }
    },
    // 获取列表
    exportExcel() {
      this.loading = true
      const request = Object.assign({}, request, this.listQuerIed)
      request.page = ''
      request.pageSize = ''
      newExportApi(request).then(res => {
        if (res.code == 1) {
          if (res.data[0].list.length == 0) {
            this.loading = false
            this.$notify({
              title: '提示',
              type: 'warning',
              message: '无列表数据',
              duration: '3000'
            })
            return
          }
          const resImport = res
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['物料名称', '规格', '品牌', '物料数量', '物料单位', '商品金额', '合同编号', '合同名称', '甲方单位', '乙方单位', '业务单元', '合同分类', '合同类型']
            const data = []
            resImport.data[0].list.forEach(item => {
              item.number = (Number(item.number).toFixed(2) + '').replace(
                /\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,
                '$&,'
              )
              data.push([item.name, item.specification, item.brand, item.number, item.unitName,
                item.total, item.code, item.contractName, item.partyAName, item.partyBName, item.businessUnitName, item.classifyName, item.typeName])
            })

            excel.export_json_to_excel({
              header: tHeader, // 表头 必填
              data, // 具体数据 必填
              filename: '商品统计分析表', // 非必填
              autoWidth: true, // 非必填
              bookType: 'xlsx', // 非必填
              sheetJsName: '商品统计分析表',
              title: '商品统计分析表'
            })
            this.loading = false
          })
        } else {
          this.loading = false
          this.$notify({
            title: '警告',
            type: 'warning',
            message: res.msg,
            duration: '3000'
          })
        }
      })
    },
    clearClassifyName() {
      this.typeNameList = []
      this.searchQuery.typeName = ''
    },
    selectClassifyName(clear) {
      if (this.searchQuery.classifyName == '单项合同') {
        contractMagDictApi('single_contract_type').then(res => {
          this.typeNameList = res.data
        })
      } else if (this.searchQuery.classifyName == '项目合同') {
        contractMagDictApi('project_contract_type').then(res => {
          this.typeNameList = res.data
        })
      }
      this.searchQuery.typeName = ''
    },
    moreClick() {
      this.ismore = !this.ismore
      const ref = this.$refs.moreSearch.$el
      if (this.ismore) {
        ref.style.height = ref.scrollHeight + 'px'
      } else {
        ref.style.height = '32px'
      }
    }
  }
}
</script>
<style lang='scss'>
</style>
